<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
	<meta charset="UTF-8">
    <title>设备基础信息</title>
    <%@ include file="head.jsp" %>
</head>
<body>

<blockquote class="layui-elem-quote" style="margin-top: 20px;margin-left: 10px;">设备基础信息<</blockquote>
<div class="layui-tab-item layui-show" style="margin-left: 10px">
    <div>
        <form class="layui-form">
            <div class="layui-inline">
                <input class="layui-input" name="eq_name" id="eq_name" placeholder="设备名字" autocomplete="off">
            </div>
            <!-- <div class="layui-inline">
                <input class="layui-input" name="eq_id" id="eq_id" placeholder="设备名id" autocomplete="off">
            </div> -->
            <div class="layui-inline" id="eq_id_div">
			   
			      <select id="eq_id" name="eq_id" lay-verify="">
			        <option value="">选择一个id</option>
			        
			      </select>
			   
			</div>
            <button class="layui-btn" lay-submit lay-filter="search" data-type="reload">搜索</button>

        </form>
        <table class="layui-table" id="eq_msg" lay-filter="dateTables"></table>
    </div>
</div>

<script>
    //JavaScript代码区域
    layui.use(['element','layer','form','table'],function(){
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        var table = layui.table;

       
        //第一个实例
       var table1 =  table.render({
            elem: '#eq_msg'
            ,height: 435
            ,url: 'selectEqMsg' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
            	{type:'numbers',title:'序号'}
                ,{field: 'eq_id', title: '设备ID'}
                ,{field: 'eq_name', title: '设备名字'}
                ,{field: 'map_x', title: '设备横坐标'}
                ,{field: 'map_y', title: '设备纵坐标'}
                ,{field: 'eq_width', title: '设备宽度'}
                ,{field: 'eq_length', title: '设备长度'}
                ,{field: 'eq_height', title: '设备高度'}
                ,{field: 'eq_temp_low', title: '设备预警温度'}
                ,{field: 'eq_temp_height', title: '设备报警温度'}

            ]]
        });
      
        
        //监听工具条
       /*  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        }); */
        
      	 $.ajax({
        	   type: "post",
        	   url : "selectEqID",
        	   success: function(data){
        		   var length = data.length;
        		   data = data.slice(1,length-1);
        		   
        		   var strs = new Array();
        		   strs = data.split(",");
        		   for( var i = 0 ; i < strs.length ; i++ ){
        			   var sc = $("<option></option>") ;
        			   sc.attr("value",strs[i]);
        			   sc.text(strs[i]);
        			   $("#eq_id").append(sc);
        		   }
        		 form.render("select");
        	   }
           })
             

        form.on('submit(search)',function(data){
        	table1.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    eq_name: data.field.eq_name
                    ,eq_id: data.field.eq_id
                }
            });
            return false;
        });

    });
</script>

</body>
</html>